<template>
  <div>
    <div class="item-container" v-for="(itme,index) in data" :key="index">
      <div class="pic" :style="{backgroundImage: `url(${$img('home_collect.png')})`}"></div>
      <div class="detail">
        <div class="title">威灵顿系列 美式古典 至尊之享 意大利进口全真皮沙发</div>
        <p class="info">1245人收藏</p>
        <p class="price">￥1400.00</p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: ['data'],
  data () {
    return {}
  }
}
</script>

<style lang="scss" scoped>
.item-container {
  overflow: hidden;
  margin-bottom: .32rem;
  height: 2.72rem;
  width: 100%;
  .pic{
    float: left;
    height: 100%;
    width: 2.72rem;
    margin-right: .1rem;
    background-size: 100% 100%;
    background-repeat: no-repeat;
  }
  .detail{
    float: left;
    width: calc(100% - 2.82rem);
    height: 100%;
    position: relative;
    .info{
      width: 100%;
      color: #999;
      font-size: .24rem;
      line-height: .34rem;
    }
    .title{
      margin-bottom: .1rem;
      color: #333;
      font-size: .24rem;
      line-height: .34rem;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      overflow: hidden;
    }
    .price{
      position: absolute;
      left: 0;
      bottom: 0;
      color: #FE0000;
      font-size: .28rem;
      line-height: .48rem;
    }
  }
}
</style>
